import React, { useState } from "react";
import {
  EllipsisOutlined,
  ReadOutlined,
  FolderOpenOutlined,
  ShareAltOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Dropdown } from "antd";

const items: MenuProps["items"] = [
  {
    key: "1",
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        打开
      </a>
    ),
    icon: <ReadOutlined />,
  },
  {
    key: "2",
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.aliyun.com"
      >
        打开所在位置
      </a>
    ),
    icon: <FolderOpenOutlined />,
  },
  {
    key: "3",
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.luohanacademy.com"
      >
        共享
      </a>
    ),
    icon: <ShareAltOutlined />,
  },
];

const App: React.FC = () => {
  const [hoveredItem, setHoveredItem] = useState<string>("");
  const _items = [
    {
      title: "AISHU-HR0082405V13.1-爱数薪酬制度-人力资源部.pdf",
      img: "./images/1.jpg",
    },
    {
      title: "AISHU-FA0202007V5.0爱数费用报销及付款财务管理制度.pdf",
      img: "./images/2.jpg",
    },
    {
      title: "AnyBackup 7.0 软件兼容性列表.xlsx",
      img: "./images/3.jpg",
    },
    {
      title: "AnyFabric Family 2 产品介绍V1.0.pptx",
      img: "./images/4.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/1.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/2.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/3.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/4.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/1.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/2.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/3.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/4.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/1.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/1.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/1.jpg",
    },
    {
      title: "AISHU-HR0082405...-人力资源部.pdf",
      img: "./images/1.jpg",
    },
  ];

  return (
    <dl className="all-watch">
      <dt>大家都在看</dt>
      <dd>
        <div className="all-watch-left">
          <div className="all-watch-left-in">
            {_items.map((item, index) => (
              <div
                className="all-watch-photo-list"
                key={index}
                onMouseEnter={() => setHoveredItem(index.toString())}
                onMouseLeave={() => setHoveredItem("")}
              >
                <div className="all-watch-photo">
                  <img src={require(item.img + "")} />
                </div>
                <div className="all-watch-title">{item.title}</div>
                <div className="all-watch-button">
                  {hoveredItem === index.toString() && (
                    <Dropdown
                      menu={{ items }}
                      placement="topLeft"
                      trigger={["click"]}
                    >
                      <EllipsisOutlined />
                    </Dropdown>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="all-watch-right"></div>
      </dd>
    </dl>
  );
};

export default App;
